<template>
  
  <div style="width: 100%; height: 100%">
    <div style="display: flex; width: 100%; height: 100%">
      <div class="wrapper1" style="margin-right: 20px">
        <a-collapse v-model:activeKey="activeKey">

          <a-collapse-panel key="4">
            <template #header
              ><a-space>
                图纸备注<Icon
                  icon="ant-design:book-outlined"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T0" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T0"
                :key="index"
                :title="item.createDate"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>

          <a-collapse-panel key="2">
            <template #header
              ><a-space>
                完工备注<Icon
                  icon="ant-design:check-circle-filled"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T1" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T1"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>

          <a-collapse-panel key="3">
            <template #header
              ><a-space>
                补领料备注<Icon
                  icon="ant-design:download-outlined"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T2" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T2"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>


          <a-collapse-panel key="4">
            <template #header
              ><a-space>
                检验备注<Icon
                  icon="simple-line-icons:wrench"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T3" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T3"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>


          <a-collapse-panel key="5">
            <template #header
              ><a-space>
                委外备注<Icon
                  icon="ant-design:comment-outlined"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T11" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T11"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>



          <a-collapse-panel key="6">
            <template #header
              ><a-space>
                退货备注<Icon
                  icon="ant-design:close-circle-filled"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T10" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T10"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <div class="wrapper1">
        <a-collapse v-model:activeKey="activeKey">

          <a-collapse-panel key="7">
            <template #header
              ><a-space>
                加工过程备注<Icon
                  icon="ant-design:cluster-outlined"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T8" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T8"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode + ' 机床：' + item.machineName"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>


          <a-collapse-panel key="8">
            <template #header
              ><a-space>
                机床完工备注<Icon
                  icon="ant-design:inbox-outlined"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T4" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T4"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode + ' 机床：' + item.machineName"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>


          <a-collapse-panel key="9">
            <template #header
              ><a-space>
                调试备注<Icon
                  icon="simple-line-icons:settings"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T7" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T7"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode + ' 机床：' + item.machineName"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>


          <a-collapse-panel key="10">
            <template #header
              ><a-space>
                首检备注<Icon
                  icon="ant-design:field-binary-outlined"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T5" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T5"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode + ' 机床：' + item.machineName"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>


          <a-collapse-panel key="11">
            <template #header
              ><a-space>
                过程检备注<Icon
                  icon="ant-design:fund-filled"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T6" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T6"
                :key="index"
                :title="item.createDate + ' 工序：' + item.operCode + ' 机床：' + item.machineName"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>

          <a-collapse-panel key="12">
            <template #header
              ><a-space>
                编程反馈检备注<Icon
                  icon="ant-design:control-filled"
                  color="#0000FF"
                  fontSize="20px" /></a-space
            ></template>
            <a-steps v-if="remarks.T9" progress-dot :current="current" direction="vertical">
              <a-step
                v-for="(item,index) in remarks.T9"
                :key="index"
                :title="item.createDate"
                :description="item.remarks"
              />
            </a-steps>
            <p v-else>{{ text }}</p>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { Icon } from '/@/components/Icon';
  import { ref, watch } from 'vue';
  import { router } from '/@/router';
  import { findAllRemarks } from '/@/api/order/order';
  
  let remarks= ref<any>({
    T0:[],
    T1:[],
    T2:[],
    T3:[],
    T4:[],
    T5:[],
    T6:[],
    T7:[],
    T8:[],
    T9:[],
    T10:[],
    T11:[],
  })
  const props = defineProps({
    picId: { type: String, default: '' },
  });
  watch(
    () => router.currentRoute.value.query.id,
    () => {
      if(router.currentRoute.value.query.id){
        remarksData(router.currentRoute.value.query.id)
      }
    },
    { immediate: true },
  );
  watch(
    () => props.picId,
    () => {
      if(props.picId){
        remarksData(props.picId)
      }
    },
    { immediate: true },
  );

  async function remarksData(picId){
    const res = await findAllRemarks({picId});
    remarks.value= res.remarks
  }
  // remarksData()
  const current = ref<number>(5);

  const text = ref(`无备注`);
  const activeKey = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']);

  watch(activeKey, (val) => {
    console.log(val);
  });
</script>
<style>
  /* .title {
    font-size: large;
  } */

  .wrapper1 {
    flex: 1;
  }
  .ant-collapse-header {
    font-weight: bolder;
  }
  .ant-collapse-item {
    margin-top: 10px;
  }
  .ant-space-item {
    font-size: large;
  }
</style>
